<!-- 柱状图 -->
<template>
	<view class="charts-box">
		<qiun-data-charts canvas2d :loadingType="0" type="column" :reshow="!!seriesData.length" :opts="opts"
			:chartData="chartData" />
	</view>
</template>

<script>
	import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		components: {
			qiunDataCharts
		},
		props: {
			//x轴标题是否旋转
			xRotateLabel: {
				type: Boolean,
				default: false
			},
			xRotateAngle: {
				type: Number,
				default: 0
			},
			colors: {
				type: Array,
				default: () => ["#00b1f2", "#7def86", "#F59A23", "#FFFF00", 'rgb(213, 22, 98)', 'rgb(92, 110, 183)']
			},
			categories: {
				type: Array,
				default: () => []
			},
			seriesData: {
				type: Array,
				default: () => []
			},
		},

		data() {
			return {
				chartData: {},
				opts: {}
			};
		},
		methods: {
			getServerData() {
				this.opts = {
					color: this.colors,
					padding: [15, 15, 0, 5],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: true,
						position: 'top',
						fontSize: '11',
						fontColor: '#333',
						float: 'center',
					},
					xAxis: {
						disableGrid: true,
						marginTop: 2,
						lineHeight: '30',
						calibration: true,
						fontColor: '#333',
						fontSize: 11,
						rotateLabel: this.xRotateLabel,
						rotateAngle: this.xRotateAngle,
					},
					yAxis: {
						gridType: "dash",
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#333",
							activeBgOpacity: 0.08,
							seriesGap: 3,
							barBorderCircle: true,
							linearType: 'opacity',
						},
					}
				};
				setTimeout(() => {
					let res = {
						categories: this.categories,
						series: this.seriesData
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 200)
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 600rpx;
	}
</style>